<template>
    <div class="page">
        <div class="top-head" style="background: #f0f0f0">
            <div class="left-btn" @click="preMonth">
                <van-icon style="font-size: 14px;color: #999999;" name="arrow-left"></van-icon>
            </div>
            <label class="top-date">{{currentDay|format('YYYY.MM')}}</label>
            <div class="right-btn" @click="nextMonth">
                <van-icon style="font-size: 14px;color: #999999" name="arrow"></van-icon>
            </div>
        </div>
        <van-cell-group>
            <van-cell @click="goList(item,key)" :key="`month-${key}`" v-for="(item,key) in months" is-link>
                <template slot="title">
                    <span class="van-cell-text">{{item.label}}</span>
                </template>
                <label :style="{color: numberColor(item)}">
                    {{item.day}}人
                </label>

            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    import service from '../apiNet'
    import dayjs from 'dayjs'
    export default {
        name: "PersonCard",
        filters:{
            empty:function (value) {
                if(value == ""){
                    return "0天"
                }else {
                    return 0
                }
            }
        },
        data() {
            return {
                now: new Date(),
                currentDay: new Date(),
                activeName: "",
                format: "year-month",
                pickerDate: null,
                showDatePicker: false,
                maxDate: new Date(),

                months: {
                    late:
                        {
                            label: "迟到早退",
                            list: [],
                            color: "#ff2f1b",
                            day: "",
                            append: "次"
                        },
                    leave:
                        {
                            label: "请假",
                            list: [],
                            color: "#44bdf1",
                            day: "",
                            append: ""
                        },
                    notcard:
                        {
                            label: "缺卡",
                            list: [],
                            color: "#f18a10",
                            day: "",
                            append: "次"

                        },
                    away:
                        {
                            label: "旷工",
                            list: [],
                            color: "#ff2f1b",
                            day: "",
                            append: "天"
                        },
                    out:
                        {
                            label: "外勤",
                            list: [],
                            color: "#159922",
                            day: "",
                            append: "天"
                        },
                },
            }
        },
        mounted() {
            this.loadInfo()
        },
        methods: {
            numberColor(item) {
                if (item.day > 0) {
                    return item.color;
                } else {
                    return "#bbb"
                }
            },
            chooseDate(date) {
                this.currentDay = date;
                this.loadMeInfo()
            },
            preMonth() {
                console.log('----')
                this.currentDay = dayjs(this.currentDay).subtract(1, 'month').toDate();
                this.loadInfo()

            },
            goList(item,key) {
                this.$store.commit('updateMonthList', {monthList: item.list});
                this.$router.push({
                    path: "/detail/month/list",
                    query: {
                        title: item.label,
                        date: dayjs(this.currentDay).format('YYYY-MM'),
                        tag:key,
                        append:item.append
                    },
                })
            },
            nextMonth() {
                if (this.currentDay.getMonth() == this.now.getMonth()) {
                    this.$toast("已是最新的数据了")
                    return;
                }
                this.currentDay = dayjs(this.currentDay).add(1, 'month').toDate();
                this.loadInfo()

            },
            loadInfo() {
                this.$toast.loading({
                    message: "正在加载...",
                    duration: 0,
                });
                service.loadCardInfo(this.currentDay, 'month', 'YYYY-MM').then((res) => {
                    if (res.Error == 0) {
                        let data = res.Data;

                        if (data.length > 0) {
                            let late = 0;
                            let leave = 0;
                            let notcard = 0;
                            let away = 0;
                            let out = 0;
                            this.months.late.list = [];
                            this.months.leave.list = [];
                            this.months.notcard.list = [];
                            this.months.away.list = [];
                            this.months.out.list = [];


                            data.forEach(item => {
                                if (item.late > 0) {
                                    late++
                                    this.months.late.list.push(item)
                                }
                                if (item.leave > 0) {
                                    leave++
                                    this.months.leave.list.push(item)
                                }
                                if (item.notCard > 0) {
                                    notcard++
                                    this.months.notcard.list.push(item)
                                }
                                if (item.away > 0) {
                                    away++
                                    this.months.away.list.push(item)
                                }
                                if (item.outday > 0) {
                                    out++
                                    this.months.out.list.push(item)
                                }
                            })
                            this.months.late.day = late;
                            this.months.leave.day = leave;
                            this.months.out.day = out;
                            this.months.away.day = away;
                            this.months.notcard.day = notcard;
                        }

                    }
                    this.$toast.clear()
                }).catch(error => {
                    console.error(error)
                    this.$toast.clear()
                })
                // service.loadCardInfo()
            }
        }
    }
</script>

<style scoped>

</style>